<script>
import { searchMidKeywordService, searchKeywordTrendService, searchKeywordSeoService, searchKeywordService, searchComKeywordService } from '../api/keyword.js'; // 导入接口
import * as echarts from 'echarts';
export default {

    props: ['query'],  // 获取 URL 中传递的 query 参数
    created() {
        console.log('Received query parameter:', this.query);
    },
    data() {
        return {
            localQuery: this.query || '中南大学',
            state: '',  // 用于存储输入框的内容
            tableData: [], // 初始化为空，稍后通过 API 获取数据
            comKeywordData: [], // 存储从竞争词接口获取的数据
            midword: "",
            loading: false,// 防止重复请求
            percentage: "", // 初始百分比
            keywordDifficulty: "", // 动态更新的关键字难度文本
            keywordData: {}, // 存储接口返回的 keyword 数据
            trendData: [], // 折线图数据
        };
    },
    methods: {
        //搜索框功能
        searchKey(query) {
            console.log('Search initiated with query:', query);

            // 调用 Vue Router 的 push 方法，跳转到 keyword 页面并传递查询参数
            this.$router.push({
                name: 'Keyword',  // 路由名称
                query: { q: query }  // URL 参数，
            });
            // 确保清空后输入框不会被锁定
            this.$nextTick(() => {
                this.$refs.searchInput.focus();  // 手动聚焦输入框
            });
        },
        // 获取关键词自身数据接口
        fetchKeywordData() {
            // 准备请求参数
            const searchData = {
                userId: "",  // 可能需要传递实际的 userId
                query: this.localQuery,  // 假设接口也需要传递 query 参数
            };// 调用接口获取数据
            searchKeywordService(searchData).then(response => {
                if (response.code === 0) {
                    console.log('API response data:', response.data);
                    // 更新 keywordData
                    this.keywordData = response.data[0];  // 假设接口返回的数据格式适合直接赋值
                    console.log('Assigned keywordData:', this.keywordData);
                    // 将 keywordData 添加到 tableData 数组的第一行
                    this.tableData.unshift({
                        midword: this.keywordData.word + ' —— <span style="font-size: 12px; color: #e97d74;">seed keyword</span>',  // 设置字体大小和颜色
                        hot: this.keywordData.hot,
                        cpc: this.keywordData.value,
                        kd: this.keywordData.rate,
                    });

                    console.log(this.tableData)
                } else {
                    console.error('Failed to fetch keyword data:', response.message);
                }
            }).catch(error => {
                console.error('Error fetching keyword data:', error);
            });
        },
        fetchTableData() {
            // 清空之前的数据
            this.tableData = [];
            // 模拟接口参数，可以根据需要替换
            const searchData = {
                userId: "", // 这里可能需要传递用户ID
                query: this.localQuery, // 假设接口需要 query 参数
            };

            searchMidKeywordService(searchData).then(response => {
                if (response.code === 0) {
                    console.log(response)
                    // 获取接口返回的数据并更新 tableData
                    this.tableData.push(...response.data.map(item => ({
                        midword: item.word,
                        hot: item.hot,
                        cpc: item.value,
                        kd: item.rate,  // 转换 rate 为数字
                    })));
                    // 默认选中第一行数据并调用 fetchTrend
                    if (this.tableData.length > 0) {
                        this.fetchTrend(this.tableData[0]);  // 默认选中第一行
                    }

                } else {
                    console.error('Failed to fetch data:', response.message);
                }
            }).catch(error => {
                console.error('Error fetching data:', error);
            });
        },
        // 模拟获取数据
        fetchTrend(row) {
            if (this.loading) return;  // 防止重复请求
            this.loading = true;
            console.log(`Fetching trend data for: ${row.midword}`);

            // 准备请求参数
            const trendData = {
                userId: "",  // 这里你可能需要传递实际的 userId
                midword: row.midword.includes(" —— <span") && row.midword.includes("seed keyword")
                    ? row.midword.replace(/ —— <span[^>]*>seed keyword<\/span>/g, '')
                    : row.midword,  // 如果包含 "—— seed keyword"，则移除,  // 使用传入的 midword 作为查询条件
            };
            // 调用接口获取数据
            searchKeywordTrendService(trendData).then(response => {
                if (response.code === 0) {

                    // 更新 midword 和百分比
                    this.midword = trendData.midword;
                    this.percentage = row.kd;
                    this.keywordDifficulty = this.difficultyText(this.percentage);

                    // 设置返回的趋势数据
                    this.trendData = response.data.map(item => ({
                        date: item.date,
                        count: item.count,
                    }));

                    // 渲染趋势图
                    this.renderTrendChart();
                    // 同时调用竞争词数据接口
                    this.fetchComKeywordData(trendData);
                } else {
                    console.error('Failed to fetch trend data:', response.message);
                }
            }).catch(error => {
                console.error('Error fetching trend data:', error);
            }).finally(() => {
                this.loading = false;  // 请求结束后解除加载状态
            });
        },
        // 获取竞争词数据接口
        fetchComKeywordData(trendData) {
            return new Promise((resolve, reject) => {
                // 假设接口返回的数据是一个数组
                searchComKeywordService(trendData).then(response => {
                    if (response.code === 0) {
                        this.comKeywordData = response.data;
                        this.comKeywordData = response.data.map(item => ({
                            cWord: item.word,
                            cSearch: item.count,
                            comRate: item.comp
                        }));
                        console.log('Competitive keyword data updated:', this.comKeywordData);
                        resolve();  // 请求成功，resolve
                    } else {
                        console.error('Failed to fetch competitive keyword data:', response.message);
                        reject('Failed to fetch competitive keyword data');  // 请求失败，reject
                    }
                }).catch(error => {
                    console.error('Error fetching competitive keyword data:', error);
                    reject(error);  // 出现错误时，reject
                });
            });
        },
        progressColor1(kd) {
            const p = kd;

            // 计算红色（r）和绿色（g）分量
            let r = Math.min(255, Math.floor((p / 100) * 255)); // 红色分量，最大255
            let g = Math.max(0, Math.floor(255 - (p / 100) * 255)); // 绿色分量，最小0

            // 计算黄色时，红绿分量相对接近
            if (p >= 40 && p <= 80) {
                r = 255; // 红色保持为255
                g = Math.floor(255 - (p / 100) * 255); // 绿色逐渐减少
            }

            return `rgb(${r}, ${g}, 0)`; // 返回动态的RGB颜色值
        },
        getKDCellStyle(kd) {
            // 根据 KD 值返回动态背景颜色
            let backgroundColor = '';
            backgroundColor = this.progressColor1(kd);
            return {
                backgroundColor,
                color: '#fff', // 字体颜色，确保对比度清晰
                padding: '0px', // 单元格内边距
                paddingtop: "1px",
                borderRadius: '3px', // 圆角
                textAlign: 'center', // 居中对齐
                width: "60px",
                height: "25px",
                fontWeight: "900",
                fontFamily: 'Microsoft JhengHei UI Light',

            };
        },
        difficultyText(p) {
            if (p >= 0 && p <= 14) {
                return "easy";
            } else if (p >= 15 && p <= 29) {
                return "still easy";
            } else if (p >= 30 && p <= 49) {
                return "possible";
            } else if (p >= 50 && p <= 69) {
                return "hard";
            } else if (p >= 70 && p <= 84) {
                return "very hard";
            } else if (p >= 85 && p <= 100) {
                return "don't do it";
            } else {
                return "unknown";
            }
        }
        ,
        // 根据百分比返回动态颜色
        progressColor() {
            const p = this.percentage;

            // 计算红色（r）和绿色（g）分量
            let r = Math.min(255, Math.floor((p / 100) * 255)); // 红色分量，最大255
            let g = Math.max(0, Math.floor(255 - (p / 100) * 255)); // 绿色分量，最小0

            // 计算黄色时，红绿分量相对接近
            if (p >= 40 && p <= 80) {
                r = 255; // 红色保持为255
                g = Math.floor(255 - (p / 100) * 255); // 绿色逐渐减少
            }

            return `rgb(${r}, ${g}, 0)`; // 返回动态的RGB颜色值
        },
        renderTrendChart() {
            const chart = echarts.init(document.getElementById('trend-chart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis', // 触发类型，'axis' 表示悬浮在坐标轴上时显示提示框
                    axisPointer: {
                        type: 'line', // 指示器类型，可选为 'line'、'shadow' 等
                    },
                    formatter: (params) => {
                        // 自定义格式化内容
                        const point = params[0];
                        return `Date: ${point.name}<br/>Count: ${point.value}`;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.trendData.map(item => item.date),
                    axisLabel: {
                        rotate: 45, // 旋转角度，优化显示
                        formatter: (value) => value.split(' ')[0], // 如果日期包含时间，仅显示日期
                    },
                },
                yAxis: {
                    type: 'value',
                },
                series: [{
                    data: this.trendData.map(item => item.count),
                    type: 'line',
                    smooth: true, // 平滑曲线
                    symbol: 'circle', // 数据点的形状
                    symbolSize: 8, // 数据点的大小
                    itemStyle: {
                        color: '#5470C6', // 数据点颜色
                        borderColor: '#FFF', // 边框颜色
                        borderWidth: 2, // 边框宽度
                    },
                    lineStyle: {
                        width: 2, // 折线宽度
                        color: '#5470C6', // 折线颜色
                    }
                }],
            });
        }, handleSizeChange(size) {
            this.pageSize = size;
        },
        handleCurrentChange(page) {
            this.currentPage = page;
        },
    },
    computed: {
        paginatedData() {
            const start = (this.currentPage - 1) * this.pageSize;
            return this.tableData.slice(start, start + this.pageSize);
        },
    },
    mounted() {
        // 默认加载第一个数据的折线图
        this.fetchKeywordData();  // 加载关键词数据
        this.fetchTableData();    // 加载表格数据
        if (this.tableData.length > 0) {
            this.fetchTrend(this.tableData[0]);
        }
        if (!this.localQuery) {  // 仅在初次加载时获取数据
            this.fetchKeywordData();
            this.fetchTableData();
        }
    },
    watch: {
        '$route.query.q': function (newQuery) {
            // 监听到 query 参数变化后，执行更新逻辑
            console.log('Query parameter changed:', newQuery);
            window.location.reload();
            // this.query = newQuery;  // 更新 query 数据
            this.localQuery = newQuery;  // 更新 localQuery 数据
            this.fetchKeywordData();  // 重新加载数据
            this.fetchTableData();    // 重新加载表格数据
        }
    },
};
</script>
<template>
    <div class="main-k">
        <div class="l-part">
            <div class="search-part">
                <el-input v-model="state" class="input-1" style="width: 550px;height: 70px;" placeholder="Please input"
                    ref="searchInput" />
                <el-button plain style="width: 70px; height: 70px;background-color: #0521cc;"
                    @click="searchKey(state)"><el-icon style="color: white;" size=30px>
                        <Right />
                    </el-icon></el-button>
            </div>
            <div class="midword-part">
                <el-card style="max-width: 700px;padding-left: 25px;margin-top: 25px;height: 500px;">
                    <el-table :data="tableData" ref="table" height="550" style="width: 100%"
                        :default-sort="{ prop: 'midword', order: 'descending' }" @row-click="fetchTrend">
                        <el-table-column prop="midword" label="MidWord" width="300" sortable> <template
                                #default="scope">
                                <!-- 使用 v-html 指令渲染 HTML 内容 -->
                                <div v-html="scope.row.midword"></div>
                            </template></el-table-column>
                        <el-table-column prop="hot" label="流量" width="100" sortable />
                        <el-table-column prop="cpc" label="CPC" width="100" sortable>
                            <template #default="scope">
                                <div>
                                    ￥{{ scope.row.cpc }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="kd" label="KD" sortable>
                            <template #default="scope">
                                <div :style="getKDCellStyle(scope.row.kd)">
                                    {{ scope.row.kd }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
        </div>
        <div class="r-part">
            <h1
                style="font-family: 'Microsoft JhengHei UI Light'; margin-left: 25px; font-weight: 900; font-size: 35px; margin-bottom: -5px; margin-top: 35px;">
                <b>{{ midword }}</b>
            </h1>
            <p
                style="display: inline-block;margin-left: 25px;font-family: 'Microsoft JhengHei UI Light';font-weight:normal;">
                <el-icon>
                    <LocationFilled />
                </el-icon>AnyWhere
            </p>
            <p
                style="display: inline-block;margin-left: 25px;font-family: 'Microsoft JhengHei UI Light';font-weight: normal;">
                <el-icon>
                    <Grid />
                </el-icon>Any Language
            </p>
            <div class="keyword-part">
                <div class="rate">
                    <el-card style="width: 200px;height: 225px;margin-left: 25px;">
                        <div style="margin-top: 15px;margin-left: 15px;">
                            <!-- 圆形进度条 -->
                            <el-progress type="dashboard" :percentage="percentage" :color="progressColor">
                                <template #default="{ percentage }">
                                    <span class="percentage-value" style="font-size: 20px;"><b
                                            style="font-weight:bolder;font-size: 30px;">{{ percentage }}</b>/100</span>
                                    <span class="percentage-label" style="font-size: 15px;font-weight:800;">{{
                                        keywordDifficulty }}</span>
                                </template>
                            </el-progress>
                            <p
                                style="margin-top: 5px;margin-left: 0px;font-family: 'Microsoft JhengHei UI Light';font-weight: bolder;">
                                Keyword
                                Difficulty</p>
                        </div>
                    </el-card>
                </div>
                <div class="trend">
                    <el-card style="width: 490px;height: 225px;margin-left: 8px;">
                        <div id="trend-chart" style="width: 100%; height: 250px;margin-top: -40px;"></div>
                    </el-card>
                </div>
            </div>
            <h1
                style="font-family: 'Microsoft JhengHei UI Light';margin-left: 25px;font-weight:bolder;font-size: 25px;margin-bottom: -5px;margin-top: 10px;">
                CompWord</h1>
            <div class="compword-part">
                <el-card style="width: 710px;height: 225px;margin-left: 25px;margin-top: 20px;">
                    <el-table ref="singleTableRef" :data="comKeywordData" highlight-current-row
                        style="width: 100%;margin-top: -15px;" @current-change="handleCurrentChange" height="200">
                        <el-table-column type="index" width="50" />
                        <el-table-column property="cWord" label="竞争关键词" width="220" />
                        <el-table-column property="cSearch" label="搜索量" width="220" />
                        <el-table-column property="comRate" label="竞争度" />
                    </el-table>
                </el-card>
            </div>
        </div>
    </div>
</template>

<style scoped>
.main-k {
    display: flex;
    /* 启用 flex 布局 */
    justify-content: space-between;
    /* 在主轴上让子项平分 */
    margin-top: -10px;
}

.l-part {
    flex: 1;
    background-color: #f9fbfc;
    height: 90vh;
    margin-top: -15px;
}

.search-part {
    padding-left: 50px;
    margin-top: 35px;
}

::v-deep(.el-input__inner) {
    height: 50px;
    line-height: 70px;
    padding: 0 0px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border-radius: 0px !important;
    /* 直角边设置 */
    background-color: transparent;
    /* 背景透明 */
    color: black;
    /* 确保文字颜色清晰可见 */
    transition: all 0.3s ease;
    /* 添加平滑过渡效果 */
}

.r-part {
    flex: 1;
    background-color: #edf0f3;
    height: 90vh;
    margin-top: -15px;
}

.keyword-part {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
}

.percentage-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
}

.percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
}

.demo-progress .el-progress--circle {
    margin-right: 15px;
}

.trend {
    flex-shrink: 0;
    /* 防止卡片缩小 */
}

.rate {
    margin-right: 5px;
    /* 为两个卡片之间添加间距 */
}
</style>